/**
 * User: Kevin
 * Date: 2017/11/27
 * Time: 14:47
 *实现图片放大器
 * @url  图片地址
 * @width 容器地址
 * @container 容器
 **/
'use strict';
// 面向对象的编程方式定义类库
var ImageZoom = function (url, width, container) {
    //保存数据
    this.url = url;
    this.width = width;
    this.container =container;

    //初始化
    this.init();
}
ImageZoom.prototype={
    //初始化方法
    init:function () {
        //加载图片
        var that = this;
        this.loadImage(function () {
            // console.log("success",that);
            //创建视图
            that.createView();
            //定义交互
            that.bindEvent()
        })
    },
    // 设置样式的方法
    css :function (dom,obj) {
        //解析obj设置元素的样式
        for(var i in obj){
            dom.style[i] = obj[i];
        }
        //链式调用
        return this;
    },
    //创建视图
    createView:function () {
        //创建一个图片
        var img = new Image();
        //创建一个div（放大器）
        var div = document.createElement('div');
        //设置样式
        this.css(img,{
            width : this.width + 'px',
            height : this.height + 'px'
        }).css(div,{
            width: this.width + 'px',
            height : this.height + 'px',
            position : 'absolute',
            left: '100%',
            top : 0,
            marginLeft: '10px',
            backgroundImage : 'url(' + this.url+ ')',
            backgroundRepeat : 'no-repeat',
            border : '1px solid #ccc',
            //默认隐藏
            display: 'none'
        })
        //设置容器
        .css(this.container,{
            width: this.width+ 'px',
            height : this.height + 'px',
            position: 'relative'
        })
        //组装元素
        this.container.appendChild(img);
        this.container.appendChild(div);
        //设置图片地址
        img.src = this.url;
        //缓存元素
        this.img = img;
        this.div = div;
    },
    loadImage:function (fn) {
        var that = this;
        //创建图片加载器
        var img = new Image();
        // 监听加载成功
        img.onload = function () {
            //保存图片与容器的比例
            that.zoom=img.width/that.width;
            //存储图片的宽高
            that.imageWidth = img.width;
            that.imageHeight = img.height;
            //容器的高度
            //等比例放缩h/w = H /W
            that.height = img.height /img.width * that.width;
            //执行回调函数
            fn();
            console.log(123)
        }
        //加载图片
        img.src=this.url;

    },
    // 定义事件
    bindEvent:function () {
        var that = this;
        //鼠标移入图片，显示弹层
        this.img.onmouseover = function () {
            that.css(that.div,{
                display:'block'
            })
        };
        //鼠标移出图片，不显示弹层
        this.img.onmouseout = function () {
            that.css(that.div,{
                display:'none'
            })
        };
        //鼠标移动，更改背景图片的位置
        this.img.onmousemove = function (e) {
            //获取鼠标的位置
            var x = e.offsetX;
            var y = e.offsetY;
            //移动距离
            var bgx = x * that.zoom;
            var bgy = y * that.zoom;
            //更新背景图片的位置
            // that.css(that.div,{
            //     backgroundPositionX: -bgx + 'px',
            //     backgroundPositionY: -bgy + 'px'
            //
            // })
            //移动的距离+ 容器的宽度 要少于图片的宽度
            if(bgx + that.width <= that.imageWidth){
                that.css(that.div,{
                    backgroundPositionX: -bgx + 'px'
                })
            }
            if(bgy + that.height <= that.imageHeight){
                that.css(that.div,{
                    backgroundPositionY: -bgy + 'px'
                })
            }
            console.log(x,y,bgx,bgy)
        }
    }

};
// new ImageZoom(
//     'demo.jpg',
//     400,
//     document.getElementById('app')
//
// )